<template>
  <div class="search">
  <img class="icon" src="https://iconfont.alicdn.com/p/illus/preview_image/Nvp39a3xYW86/e66d6628-0261-4ece-8d7b-a0da3b82d54e.png" alt="">
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
    <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
    <!-- <el-breadcrumb-item >库存管理</el-breadcrumb-item> -->
    <el-breadcrumb-item :to="{ path:'/index/stock' }">库存总览</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path:'/index/search' }">库存查询</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path:'/index/amend' }">库存更改</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path:'/index/addmounted' }">新增商品库存</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/index/hint' }"
        >急需补货提示</el-breadcrumb-item
      >
    </el-breadcrumb>

    <h1 class="h1">商品库存搜索</h1>
    <!-- input表单 -->
    <el-input v-model="input" placeholder="请输入你要查询的商品id" autofoucs  ref="refInput" class="inp" />

    <!-- 按钮 -->
    <!-- <el-row class="mb-4"> -->
        
        
        <el-button :plain="true" @click="search()">查询</el-button>
        
    <!-- </el-row> -->

    <!-- 查询出来的列表 -->
    <el-card>
      <el-table :data="tableData.list" style="width: 100%">
    <el-table-column fixed prop="goodsname" label="商品名称" width="150" />
    <el-table-column prop="goodsid" label="商品id" width="120" />
    <el-table-column prop="goodspreon" label="商品价格" width="120" />
    <el-table-column prop="goodsamount" label="商品库存" width="120" />
    <el-table-column prop="maxamount" label="最大库存" width="120" />
    <el-table-column prop="replenish" label="应补货量" width="120" />
    <el-table-column fixed="right" label="数据操作" width="200">
      <template #default="scope">
        <el-button link type="primary" size="small" @click.prevent="handleClick(scope.row)">编辑</el-button>
        <!-- <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button> -->
        <el-button :plain="true" @click="deleteRow(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-card>
    




  </div>
</template>

<script setup>
import axios from 'axios';
import {useRouter} from 'vue-router'
import '../../../mock/mounted';
import {Check,Delete,Edit,Message,Search,Star} from '@element-plus/icons-vue';
import { ref ,reactive,nextTick, onMounted} from 'vue';
// 引入提示
import { ElMessage } from 'element-plus'
import { user_mosearch,user_amend,user_modelete} from '../../../utils/api'


var $router = useRouter();
var input = ref('')
var tableData = reactive({list:[]})

// 创建ref对象input输入框
var refInput =ref()
// 让组件在挂载时input框自动获取焦点
 onMounted(()=>{
  refInput.value.focus();
 })


// 查询商品（根据商品id去查询商品）
var search = function(){
  user_mosearch({id:input.value}).then((res)=>{
    tableData.list =res.data.list;
    // 计算应补货量
    tableData.list.forEach((item)=>{
      item.replenish = item.maxamount - item.goodsamount;
      // console.log(item.replenish)
    })
    refInput.value.value = '';
    
    // console.log(localStorage.getItem(user_amount))
    // console.log(res.data)
    // console.log(input.value)
    // console.log(res.data.states);
    if(res.data.states == 200){
      ElMessage({
      message: '查询成功。',
      type: 'success',
  })
    }else{
      ElMessage.error('未找到商品id')
    }
     
  })
}
// 跳转到编辑页面
var handleClick = () => {
  $router.push({path:'/index/amend',query:row})
}
// 表单部分
var handleClick = () => {
  console.log('click')
}

// 删除数据
var deleteRow =(row) =>{
  user_amend({id:row.goodsid}).then((res)=>{
    console.log('delete',res.data);
    tableData.list = res.data.list;
    tableData.list = '';
    // 弹出删除成功提示
    ElMessage({
    message: '删除成功。',
    type: 'success',
  })
  })
}

// 编辑商品库存
var handleClick = (row) => {
  $router.push({path:'/index/amend',query:row})
}

// 提示



const open2 = () => {
  ElMessage({
    showClose: true,
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}

</script>



<style scoped>
.search{
  position: relative;
}
  .mb-4{
    margin: 10px 0;
  }
  .inp{
    width: 500px;
    margin: 20px 20px 20px 0;
  } 
  .h1{
    margin-top: 20px;
  } 
  .icon{
  position: absolute;
  top: 30px;
  right: 580px;
  width: 100px;
  height: 100px; 
}
</style>